<template>
  <PageWrapper title="">
    <XGrid
    ref="xGrid"
    :columns="columns"
    :show-overflow="true"
    :line="true"
    :stripe="false"
    :checkStrictly="true"
    is-tree
    :query-params="formConditionData.data"
    :query-api="getListData"
    :deletes-api="deletes"
    @create="drawer.data.show = true"
    @edit="handleEdit"
    >
    <template #topLeft2>
      <a @click="setAllTreeExpand">展开/收起</a>
    </template>
    <template #form>
    <vxe-form :data="formConditionData.data" title-colon collapse-status>
      <vxe-form-item title="货物分类名称">
        <template #default="{ data }">
          <vxe-input 
          v-model="data.word" clearable
            prefix-icon="vxe-icon-search"
            placeholder="请输入分类名称"/>
        </template>
      </vxe-form-item>
      <vxe-form-item title="启用" field="status" :folding="false">
        <template #default="{ data }">
          <vxe-select v-model="data.enable" placeholder="请选择" clearable>
            <vxe-option :value="1" label="启用"/>
            <vxe-option :value="2" label="禁用"/>
          </vxe-select>
        </template>
      </vxe-form-item>

      <vxe-form-item align="center">
      <template #default>
          <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
          <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
              <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
          </a-popconfirm>
      </template>
      </vxe-form-item>
    </vxe-form>
    </template>
  </XGrid>
    <Drawer
:show="drawer.data.show" :is-update="drawer.data.isUpdate"
        :row="drawer.data.row"
        @on-success="onSuccess"
        @on-drawer-close="onDrawerClose"/>
  </PageWrapper>
</template>
<script lang="ts" name="GoodsCate" setup>
import { reactive, ref, } from 'vue';
import Drawer from './Drawer.vue';
import { columns } from './data';
import { deletes, getListData } from '/@/api/wms/goods-cate';
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref()
const formConditionData = reactive({
  data: {
    word: '',
    enable: null,
  }
})

const drawer = reactive({data: {
  show: false,
  isUpdate: false,
  row: null,
}})

const handleEdit = (row_:any) => {
  drawer.data.show = true
  drawer.data.isUpdate = true
  drawer.data.row = row_
}

const onDrawerClose = () => {
  Object.assign(drawer, {data: {}})
}

const onSuccess = () => {
  xGrid.value.reload()
}

const allExpand = ref(true)
const setAllTreeExpand = () => {
  allExpand.value = !allExpand.value
  xGrid.value.setAllTreeExpand(allExpand.value)
}

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  xGrid.value.reload(true)
}

</script>

<style scoped>
</style>
